<template>
    <div class="patent">
        <el-row :gutter="24">
            <el-col :span="8">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="处理状态">
                        <el-select v-model="formInline.clzt" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="resetForm()">重置</el-button>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="24">
                <el-table :data="tableData" border style="width: 100%" align="center">
                    <el-table-column type="index" width="50" center>
                    </el-table-column>
                    <el-table-column prop="xingming" label="姓名" width="180">
                    </el-table-column>
                    <el-table-column prop="keshi" label="科室" width="180">
                    </el-table-column>
                    <el-table-column prop="zhiwu" label="职务" width="180">
                    </el-table-column>
                    <el-table-column prop="gonghao" label="工号" width="180">
                    </el-table-column>
                    <el-table-column prop="shouji" label="手机" width="180">
                    </el-table-column>
                    <el-table-column prop="youxiang" label="邮箱" width="180" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="miaoshu"
                        label="预申请专利技术方案描述(包含详细个绍背景技术并描述已有的与本发明最相近似的实现方案，现有技术的问题，本发明的技术方案及技术效果，本发明的关键点和欲保护点)" width="680">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                            <el-button @click="send(scope.row)" type="text" size="small" slot="reference"
                                v-if="scope.row.clzt == '待处理'">发送处理</el-button>
                            <el-button type="text" size="small" slot="reference" v-if="scope.row.clzt != '待处理'"
                                disabled>发送处理</el-button>
                        </template>
                    </el-table-column>

                </el-table>

            </el-col>
        </el-row>
        <div style="text-align: right; margin-top: 20px;">

            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="pageSize" layout="total, prev, pager, next, sizes"
                :total="total">
            </el-pagination>
        </div>


        <!-- 申请门诊 -->
        <el-dialog :span="24" :visible.sync="payOverVisible" title="申请门诊" width="70%">

            <el-form :model="form" ref="form" label-position="top">
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="日期" :label-width="formLabelWidth">
                            <el-input v-model="form.riqi" autocomplete="off" :disabled="true"></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">

                    </el-col>

                </el-row>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="姓名" :label-width="formLabelWidth">
                            <el-input v-model="form.xingming" autocomplete="off" :disabled="true"></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="科室" :label-width="formLabelWidth">

                            <el-input v-model="form.keshi" :disabled="true"></el-input>
                        </el-form-item>

                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="职务" :label-width="formLabelWidth">
                            <el-input v-model="form.zhiwu" autocomplete="off" :disabled="true"></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="工号" :label-width="formLabelWidth">

                            <el-input v-model="form.gonghao" :disabled="true"></el-input>
                        </el-form-item>

                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="手机" :label-width="formLabelWidth">
                            <el-input v-model="form.shouji" autocomplete="off" :disabled="true"></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="邮箱" :label-width="formLabelWidth">

                            <el-input v-model="form.youxiang" :disabled="true"></el-input>
                        </el-form-item>

                    </el-col>
                </el-row>


                <el-row :gutter="24">
                    <el-col :span="24">
                        <el-form-item label="预申请专利技术方案描述(包含详细个绍背景技术并描述已有的与本发明最相近似的实现方案，现有技术的问题，本发明的技术方案及技术效果，本发明的关键点和欲保护点)"
                            :label-width="formLabelWidth">
                            <el-input v-model="form.miaoshu" type="textarea" autocomplete="off" :disabled="true"></el-input>
                        </el-form-item>

                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="24">
                        <el-form-item label="相关附件（文章，技术交底书等）" :label-width="formLabelWidth">
                            <div style="padding: 20px; ">
                                <div v-for="(f, index) in file" :key="index">
                                    <a :href="f.original_file_full_path" :download="f.original_file_name">{{f.original_file_name}}</a>
                                </div>
                            </div>
                        </el-form-item>

                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="24">
                        <el-form-item label="回复" :label-width="formLabelWidth">
                            <el-input v-model="form.huifu" type="textarea" autocomplete="off" :disabled="true"></el-input>
                        </el-form-item>

                    </el-col>
                </el-row>
            </el-form>

        </el-dialog>
    </div>
</template>
<script>
import Cookies from "js-cookie";

export default {
    data() {
        return {
            userInfo: {},
            restaurants: [],
            state: '',
            timeout: null,
            formInline: {
                clzt: ''
            },
            options: [{
                value: '待处理',
                label: '待处理'
            }, {
                value: '已发送处理',
                label: '已发送处理'
            }, {
                value: '已处理，待回复',
                label: '已处理，待回复'
            }],
            tableData: [],
            currentPage: 1,
            pageSize: 20,
            total: 0,
            form: {

            },
            payOverVisible: false,
            formLabelWidth: '100px',
            fileList: [],
            file:[],
            filelink:""
        }
    },
    created() {

    },
    mounted() {
        this.getCookie()
        this.getFilterRows()
    },
    methods: {
        getCookie() {
            this.userInfo = JSON.parse(Cookies.get("userInfo"));
        },
        onSubmit() {
            console.log('submit!');
            this.getFilterRows()
        },

        querySearchAsync(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                cb(results);
            }, 3000 * Math.random());
        },
        createStateFilter(queryString) {
            return (state) => {
                return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        handleSelect(item) {
            console.log(item);
        },
        resetForm(formName) {
            this.formInline.clzt = ''
            this.getFilterRows()
        },



        //
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val
            this.getFilterRows()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val
            this.getFilterRows()
        },

        //
        getFilterRows() {
            var param = {
                "appKey": "c4d42996f1b29c98",
                "sign": "MGJjY2VmMGQwYjIzYzM3OTBjYmYyODk0ODJjOGQ0ZmY1Y2MzZTRlZDNkMmIyYzM1NTRjZDMxYTIwMzg3ODIzMw==",
                "worksheetId": "sqmz",
                "pageSize": this.pageSize,
                "pageIndex": this.currentPage,
                "sortId": "riqi",
                "isAsc": "false",
                "filters": [
                    {
                        "controlId": "clzt",
                        "dataType": 2,
                        "spliceType": 2,
                        "filterType": 1,
                        "value": this.formInline.clzt
                    },
                    {
                        "controlId": "ssdw",
                        "dataType": 2,
                        "spliceType": 2,
                        "filterType": 1,
                        "value": this.userInfo.danwei
                    }
                ]

            }
            this.$apiFun.getFilterRows(param).then((res) => {
                //根据后端返回数据进行data的逻辑处理
                console.log(res)
                this.total = res.data.total
                this.tableData = res.data.rows
            })
        },
        send(row) {
            this.rowItem = row
            var param = {
                "appKey": "c4d42996f1b29c98",
                "sign": "MGJjY2VmMGQwYjIzYzM3OTBjYmYyODk0ODJjOGQ0ZmY1Y2MzZTRlZDNkMmIyYzM1NTRjZDMxYTIwMzg3ODIzMw==",
                "worksheetId": "sqmz",
                "rowId": row.rowid,
                "controls": [
                    {
                        "controlId": "clzt",
                        "value": "已发送处理",
                        "valueType": "1"
                    }
                ],
                "triggerWorkflow": true
            }
            this.$apiFun.editRow(param).then((res) => {
                //根据后端返回数据进行data的逻辑处理
                console.log(res)
                this.$message({
                    message: '发送处理成功',
                    type: 'success'
                });
                this.getFilterRows()
            })
        },
        handleClick(row) {

            this.rowItem = row
            var param = {
                "appKey": "c4d42996f1b29c98",
                "sign": "MGJjY2VmMGQwYjIzYzM3OTBjYmYyODk0ODJjOGQ0ZmY1Y2MzZTRlZDNkMmIyYzM1NTRjZDMxYTIwMzg3ODIzMw==",
                "worksheetId": "sqmz",
                "rowId": row.rowid
            }
            this.$apiFun.getRowByIdPost(param).then((res) => {
                //根据后端返回数据进行data的逻辑处理
                console.log(res)
                this.form = res.data
                this.payOverVisible = true
                if (res.data.xgfj) {
                    try {
                        this.file = JSON.parse(res.data.xgfj);
                    } catch (error) {
                        console.error('解析JSON时出错:', error);
                        // 根据需要进行错误处理
                    }
                } else {
                    // 处理res.data.xgfj为空或未定义的情况
                    this.file = [];
                }
                console.log(this.file)
            })

        }
    }
}
</script>

<style lang="scss" scoped>
.patent {
    background-color: #fff;
    padding: 15px;
}

.el-form-item {
    text-align: left;
}
</style>